/* eslint-disable no-param-reassign */
import './index.less'
import {CnBoldP, CnNormalP} from '@/components/text'
import {WaterAnalyzeCard} from './components/waterAnalyzeCard'
import {WaterOverviewCard} from './components/waterOverviewCard'
import {ParamTableCard} from './components/paramTableCard'
import {
  uSelectSingleParamDataStatistic,
  uSelectSingleParamExceptionDistribution
} from '@/api/singleParam'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import dayjs from 'dayjs'
import {selectParamDataTypeApi} from '@/api/selectlogType.ts'
import {uSelectCheckDataByQueryVo} from '@/api/singleParam'

export default defineComponent({
  name: 'singleParam',
  setup() {
    const {route} = useGlobalAPI()
    const state = reactive<{
      dateTime: [string, string]
      waterOverview: SingleParam.WaterOverview | null
      waterOverviewSpinning: boolean
      abnormalDivision: SingleParam.AbnormalDivision | null
      abnormalDivisionSpinning: boolean
      paramTableSpinning: boolean
    }>({
      dateTime: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD 23:59:59')],
      waterOverview: null,
      waterOverviewSpinning: false,
      abnormalDivision: null,
      abnormalDivisionSpinning: false,
      paramTableSpinning: false
    })

    function getWaterOverview(devId?: string, paramName?: string) {
      devId = devId || (route.query.devId as string)
      paramName = paramName || (route.query.paramName as string)
      if (!devId) return
      if (!paramName) return
      state.waterOverviewSpinning = true
      uSelectSingleParamDataStatistic({
        devId,
        startTime: state.dateTime[0],
        endTime: state.dateTime[1],
        paramstatus: currentSelectedTypeCode.value,
        paramName
      })
        .then(res => {
          if (res) {
            console.log(res.data, 'res.data')
            paramNameV.value = res.data.checkData.checkDataName
            state.waterOverview = res.data
          }
          state.waterOverviewSpinning = false
        })
        .catch(err => {
          state.waterOverviewSpinning = false
        })
    }

    // 参数名称
    const paramNameV = ref('')

    function getAbnormalDivision(devId?: string, paramName?: string) {
      devId = devId || (route.query.devId as string)
      paramName = paramName || (route.query.paramName as string)
      if (!devId) return
      if (!paramName) return
      uSelectSingleParamExceptionDistribution({devId, paramName})
        .then(res => {
          if (res) {
            state.abnormalDivision = res.data
          }
        })
        .catch(err => {})
    }

    // function getParamTable(devId?: string, paramName?: string) {
    //   devId = devId || (route.query.devId as string)
    //   paramName = paramName || (route.query.paramName as string)
    //   if (!devId) return
    //   if (!paramName) return
    //   uSelectCheckDataByQueryVo({devId, paramName, page: 1, size: 20})
    //     .then(res => {
    //       if (res) {
    //         state.paramTable = res.data.list
    //       }
    //     })
    //     .catch(err => {})
    // }

    function getPageData() {
      const devId = route.query.devId as string
      const paramName = route.query.paramName as string
      if (!devId) return
      if (!paramName) return
      getWaterOverview(devId, paramName)
      getAbnormalDivision(devId, paramName)
      // getParamTable(devId, paramName)
    }

    watch(
      () => state.dateTime,
      (n, o) => {
        if (n[0] !== o[0] || n[1] !== o[1]) {
          getWaterOverview()
        }
      }
    )

    // 历史记录类型列表
    const typeList = ref([
      {
        dictName: '适宜',
        dictCode: '0172',
        id: 220
      },
      {
        dictName: '偏高',
        dictCode: '0173',
        id: 221
      },
      {
        dictName: '偏低',
        dictCode: '0174',
        id: 222
      },
      {
        dictName: '故障',
        dictCode: '0175',
        id: 223
      }
    ])

    // 当前选择的历史记录类型
    const currentSelectedTypeCode = ref('')

    // 修改当前历史记录类型的函数
    const editCurrentSelectedTypeCodeFunc = (val: string) => {
      console.log(val, '修改了code')
      currentSelectedTypeCode.value = val
      // getPageData()
    }

    // 查询记录类型列表的函数
    // const selectTypeListFunc = async () => {
    //   const res = await selectParamDataTypeApi()
    //   // console.log(res, 'resresres')
    //   // typeList.value = res.data
    //   // console.log(typeList.value, '记录类型')
    // }

    onMounted(() => {
      getPageData()
      // selectTypeListFunc()
    })

    return () => (
      <div class='singleDevParams'>
        <CnBoldP class='mt-11 text-20'>设备水质数据</CnBoldP>
        <CnNormalP class='mt-6 text-4xText'>
          查看设备检测到的水质数据，并根据数据优化您的运营
        </CnNormalP>
        <div class='mt-26 grid grid-cols-3 gap-x-20 gap-y-20 relative'>
          {state.waterOverview ? (
            <WaterOverviewCard
              v-model={[state.dateTime, 'dateTime']}
              spinning={state.waterOverviewSpinning}
              waterOverview={state.waterOverview}
            ></WaterOverviewCard>
          ) : (
            <div class='col-span-2 row-span-2'></div>
          )}

          {state.abnormalDivision ? (
            <WaterAnalyzeCard
              abnormalDivision={state.abnormalDivision}
              paramNameV={paramNameV.value}
            ></WaterAnalyzeCard>
          ) : (
            <div class='col-span-1'></div>
          )}
        </div>

        {state.waterOverview ? (
          <ParamTableCard
            waterOverview={state.waterOverview}
            typeList={typeList.value}
            currentType={currentSelectedTypeCode.value}
            onEditCurrentTypeCode={editCurrentSelectedTypeCodeFunc}
          ></ParamTableCard>
        ) : null}
      </div>
      // <div>nps</div>
    )
  }
})
